import React, { useEffect, useState } from "react";
import ReactECharts from "echarts-for-react";
import { Row, Col } from "antd";
import { getEchartsListType, getList } from "../../api";
import { ListRawState } from "../listManage";


const option1 = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: "5%",
    left: "center",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" },
      ],
    },
  ],
};


const Index: React.FC = () => {
  // 1. 容器
  const [options, setOptions] = useState<any>({})
  // 2. 请求函数
  const fetchData = async () => {
    const resp = await getEchartsListType();
    setOptions(resp.data.data)
  };  
  // 3. 副作用函数
  useEffect(() => {
    fetchData()
  }, []);

  return (
    <div>
      <Row>
        <Col>
          <ReactECharts
            option={option1}
            style={{ width: 500, height: 500 }}
          ></ReactECharts>
        </Col>
        <Col>
          <ReactECharts
            option={options}
            style={{ width: 500, height: 500 }}
          ></ReactECharts>
        </Col>
      </Row>
    </div>
  );
};

export default Index;
